<template>
	<view class="page notice-platform">
		<nav-header title="平台通知" :show-right="false">
		</nav-header>
		<view class="deal">
			<view v-for="item in noticeList" :key="item.id" class="deal-item">
				<view class="deal-time">{{ item.sendTime }}</view>
				<view class="header_top">
					<view class="header">
						<view class="header-item" v-if="item.businessType == 0">
							<img :src="getResource('/icon/chongzhi.svg')" alt="" class="deal-img">
							<text>关联群通知</text>
						</view>
						<view class="header-item" v-else-if="item.businessType == 2">
							<img :src="getResource('/icon/chongzhi.svg')" alt="" class="deal-img">
							<text>邀请加入企业通知</text>
						</view>
					</view>
					<view>{{item.messageDetail.status == 0 ? '未审核' : '已审核'}}</view>
				</view>
				<up-line></up-line>
				<view v-if="item.businessType == 0"
					@tap="goPage(`/pageSubOne/notice/notice-platform-detail?id=${item.messageDetail.messageId}`)">
					<view class="content">
						<view class="pay">
							<text>成交佣金</text>
							<text class="money">￥{{ item.messageDetail.trafficRate }}</text>
							<view class="detail">
								详情信息
								<up-icon size="16" name="arrow-right" color="#909399"></up-icon>
							</view>
						</view>
					</view>
					<view class="value-list">
						<view class="value-item">
							<text class="title">申请人 </text>
							<text class="value">{{ item.messageDetail.applyName }}</text>
						</view>
						<view class="value-item">
							<text class="title">关联群 </text>
							<text class="value">{{ item.messageDetail.followGroupName }}</text>
						</view>
						<view class="value-item">
							<text class="title">被关联群 </text>
							<text class="value">{{ item.messageDetail.leaderGroupName }}</text>
						</view>
						<view class="value-item">
							<text class="title">流量费率 </text>
							<text class="value">{{ item.messageDetail.transactionCommission }}</text>
						</view>
					</view>
				</view>
				<view v-else-if="item.businessType == 2"
					@tap="goPage(`/pageSubOne/notice/invite-join-company?id=${item.messageDetail.messageId}`)">
					<view class="content">
						<view class="pay">
							<text>{{item.messageDetail.applyName}}邀请你加入</text>
							<text
								style="font-size: 38rpx;color: black;font-weight: 600; width: 80%;">{{ item.messageDetail.companyName }}</text>
						</view>
					</view>
					<view class="value-list">
						<view class="value-item">
							<text class="title">邀请人</text>
							<text class="value">{{ item.messageDetail.applyName }}</text>
						</view>
						<view class="value-item">
							<text class="title">企业</text>
							<text class="value">{{ item.messageDetail.companyName }}</text>
						</view>
						<view class="value-item">
							<text class="title">邀请时间</text>
							<text class="value">{{ item.messageDetail.applyDate }}</text>
						</view>
					</view>
				</view>
			</view>
			<view v-if="noticeList.length==0 && !loading" style="margin-top: 50%;">
				<up-empty :icon="getResource('/icon/empty-message.svg')"  text="暂无数据">
				</up-empty>
			</view>
		</view>
	</view>
</template>

<script>
	import * as wsApi from '../../common/wssocket';
	export default {
		data() {
			return {
				noticeList: [],
				applyList: [],
				pageNum: 1,
				pageSize: 5,
				loading: false,
				hasMore: true
			}
		},
		methods: {
			getData() {
				this.$http({
					url: `/systemMessage/findSystemMessageByType?type=56&pageNum=${this.pageNum}&pageSize=${this.pageSize}`,
					method: "POST"
				}).then((data) => {
					if (data.records.length > 0) {
						// this.noticeList = data.records
						this.noticeList.push(...data.records)
						/* const newApplyList = data.records
							.filter(item => item.messageDetail)
							.map(item => item.messageDetail);

						const formattedData = newApplyList.map(item => ({
							...item,
							applyDate: this._formatTimestamp(item.applyDate)
						}));
						this.applyList = this.applyList.concat(formattedData); */
						this.pageNum++;
					} else {
						this.hasMore = false;
					}
					this.loading = false;

				})
			},

			// 把时间戳转换为年月日
			_formatTimestamp(timestamp) {
				const date = new Date(timestamp);
				const year = date.getFullYear();
				const month = String(date.getMonth() + 1).padStart(2, '0');
				const day = String(date.getDate()).padStart(2, '0');
				const hours = String(date.getHours()).padStart(2, '0');
				const minutes = String(date.getMinutes()).padStart(2, '0');
				const seconds = String(date.getSeconds()).padStart(2, '0');
				return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
			}
		},
		onLoad(options) {

		},
		// 下拉加载
		onReachBottom() {
			if (this.hasMore && !this.loading) {
				this.getData();
			}
			if (!this.hasMore) {
				return
			}
		},
		onShow() {
			this.getData()
		},
	}
</script>

<style lang="scss" scoped>
	.notice-platform {
		height: unset !important;

		.notice {
			font-size: 30rpx;

			.notice-item {
				padding: 30rpx;
			}

			.time {
				text-align: center;
				color: #757575;
			}

			.content {
				margin-top: 20rpx;
			}
		}

		.deal {
			width: 100%;
			display: flex;
			flex-direction: column;
			gap: 20px;

			.deal-item {
				background-color: $white;
				padding: 30rpx;

				.deal-time {
					text-align: center;
					color: #8b8b8b;
					font-size: 30rpx;
				}
                .header_top{
					display: flex;
					align-items: center;
					justify-content: space-between;
					.header {
						padding: 20rpx;
					
						.header-item {
							display: flex;
							align-items: center;
					
							.deal-img {
								width: 70rpx;
								height: 70rpx;
								margin-right: 20rpx;
							}
						}
					}
				}


				.content {
					display: flex;
					justify-content: center;
					align-items: center;
					flex-direction: column;
					margin: 60rpx 0;
					font-size: 30rpx;

					.pay {
						display: flex;
						flex-direction: column;
						align-items: center;
						color: #8b8b8b;

						.money {
							font-weight: 600;
							color: #000;
							font-size: 55rpx;
							width: 80%;
						}

						.detail {
							display: flex;
							margin-top: 20rpx;
							color: #8b8b8b;
							margin-left: 30rpx;
						}
					}
				}

				.value-list {
					color: #8b8b8b;
					font-size: 30rpx;
					padding: 0 10px;
					display: flex;
					flex-direction: column;
					gap: 10px;
					align-items: flex-start;

					.value-item {
						display: flex;

						.title {
							width: 80px;
						}

						.value {
							flex: 1;
						}
					}
				}
			}
		}

	}
</style>